<template>
  <kinesis-container>
    <div class="login-wrap">
      <kinesis-element :parallaxStrength="4" :type="parallax">
        <div class="login-box">
          <img
            src="../../assets/images/login/logo-small.png"
            class="nice-logo"
          />
          <p>欢迎登陆</p>
          <!-- 表单 -->
          <div class="login-form">
            <el-form :model="loginForm" :rules="rules"  ref="loginForm">
              <div class="login-input">
                <!-- 邮箱 -->
                <el-form-item prop="email">
                  <el-input
                    class="login-text"
                    type="text"
                    placeholder="请输入邮箱"
                    v-model="loginForm.email"
                  />
                  <span class="login-symbol">
                    <i class="iconfont nice-icon-user"></i>
                  </span>
                </el-form-item>
              </div>
              <!-- 密码 -->
              <div class="login-input">
                <el-form-item prop="password">
                  <el-input
                    class="login-text"
                    :type="passwordType"
                    placeholder="请输入密码"
                    v-model="loginForm.password"
                    @keyup.enter.native="handleLogin()"
                  />
                  <!-- 小锁 -->
                  <span class="login-symbol">
                    <i class="iconfont nice-icon-lock"></i>
                  </span>
                  <span class="show-pwd" @click="showPwd">
                    <svg-icon
                      :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                  </span>
                </el-form-item>
              </div>

              <div class="login-footer">
                <div class="login-btn-wrap">
                  <el-button
                    class="login-btn"
                    type="primary"
                    :loading="loading"
                    @click="handleLogin('loginForm')"
                  >
                    登录
                  </el-button>
                </div>

              </div>
              <div class="login-footer">
                <div class="login-btn-wrap">
                  <el-button
                    class="login-btn"
                    type="primary"
                    :loading="loading"
                    @click="handleForget"
                  >
                    忘记密码？
                  </el-button>
                </div>

              </div>
            </el-form>
          </div>
        </div>
      </kinesis-element>
    </div>
  </kinesis-container>
</template>

<script>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
import rules  from "@/data/userRules"
import Cookies from 'js-cookie'
export default {
  name: "login",
  data() {
    return {
      // 表单
      loginForm: {
        email: "2225602504@qq.com",
        password: "12580"
      },
      // 表单规则
      rules,
      passwordType: "password",
      parallax: "depth", // 视差类型
      loading: false, // 登录按钮是否加载
      redirect: undefined // 重定向的路由
    };
  },
  components: {
    KinesisContainer,
    KinesisElement
  },
  watch: {
    $route: {
      handler: function(route) {
        // 记录当前路由
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
    async handleLogin(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await this.$store.dispatch('user/login',this.loginForm)
            if(res.code == 1) {
                await this.$store.dispatch('user/save',res.data)
                   // 跳转路由 
                this.$router.push({ path: this.redirect || '/' })
                // 取消按钮加载
                this.loading = false
                this.$message({
                  showClose: true,
                  message: '欢迎您 ！亲爱的 '+res.data.username,
                  type: 'success'
                })

            }else{
               this.$message({ showClose: true, message:  res.msg, type: 'error' })
            }

          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
            return false;
          }
        });
    },
    handleForget(){
      console.log(11);
      this.$router.push({ path: '/login/forget' })
    }
  }
}

  

</script>

<style lang="scss">
@import "../../assets/styles/login.scss";
</style>
